<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="90px"
    >

<!--      <el-form-item label="主页ID" prop="homepageId">-->
<!--        <el-input-->
<!--          v-model="queryParams.homepageId"-->
<!--          placeholder="请输入主页ID"-->
<!--          clearable-->
<!--          @keyup.enter="handleQuery"-->
<!--          class="!w-210px"-->
<!--        />-->
<!--      </el-form-item>-->

      <el-form-item label="患者姓名" prop="patientName">
        <el-input
          v-model="queryParams.patientName"
          placeholder="请输入患者姓名"
          clearable
          @keyup.enter="handleQuery"
          class="!w-210px"
        />
      </el-form-item>
     
      <el-form-item label="住院号" prop="hospitalNo">
        <el-input
          v-model="queryParams.hospitalNo"
          placeholder="请输入住院号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-210px"
        />
      </el-form-item>


      <el-form-item label="出院科室" prop="leaveHospitalDept">
        <el-select
          v-model="queryParams.leaveHospitalDept"
          placeholder="请选择出院科室"
          clearable
          class="!w-210px"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.HOSP_MEDICAL_COPY_DEPT)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="申请人姓名" prop="applicantName">
        <el-input
          v-model="queryParams.applicantName"
          placeholder="请输入申请人姓名"
          clearable
          @keyup.enter="handleQuery"
          class="!w-210px"
        />
      </el-form-item>
      <el-form-item label="申请单号" prop="applyNo">
        <el-input
          v-model="queryParams.applyNo"
          placeholder="请输入申请单号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-210px"
        />
      </el-form-item>
<!--      <el-form-item label="患者证件号" prop="patientCardNo">-->
<!--        <el-input-->
<!--          v-model="queryParams.patientCardNo"-->
<!--          placeholder="请输入患者证件号"-->
<!--          clearable-->
<!--          @keyup.enter="handleQuery"-->
<!--          class="!w-210px"-->
<!--        />-->
<!--      </el-form-item>-->

      
<!--      <el-form-item label="申请人证件号" prop="applicantCardNo">-->
<!--        <el-input-->
<!--          v-model="queryParams.applicantCardNo"-->
<!--          placeholder="请输入申请人证件号"-->
<!--          clearable-->
<!--          @keyup.enter="handleQuery"-->
<!--          class="!w-210px"-->
<!--        />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="收件人姓名" prop="recipientName">-->
<!--        <el-input-->
<!--          v-model="queryParams.recipientName"-->
<!--          placeholder="请输入收件人姓名"-->
<!--          clearable-->
<!--          @keyup.enter="handleQuery"-->
<!--          class="!w-210px"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="收件人电话" prop="recipientPhone">
        <el-input
          v-model="queryParams.recipientPhone"
          placeholder="请输入收件人电话"
          clearable
          @keyup.enter="handleQuery"
          class="!w-210px"
        />
      </el-form-item>

      <el-form-item label="快递单号" prop="deliveryNo">
        <el-input
          v-model="queryParams.deliveryNo"
          placeholder="请输入快递单号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-210px"
        />
      </el-form-item>
      <el-form-item label="支付订单号" prop="orderNumber">
        <el-input
          v-model="queryParams.orderNumber"
          placeholder="请输入支付订单号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-210px"
        />
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
          class="!w-210px"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.HOSP_MEDICAL_COPY_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-190px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" border :data="list" :stripe="true" :show-overflow-tooltip="true">
<!--      <el-table-column label="ID" align="center" prop="id" />-->
<!--      <el-table-column label="机构ID" align="center" prop="orgId" />-->
<!--      <el-table-column label="机构名称" align="center" prop="orgName" />-->
<!--      <el-table-column label="机构编码" align="center" prop="orgCode" />-->
      <el-table-column label="患者姓名" align="center" prop="patientName" fixed="left" width="90"/>
      <el-table-column label="住院号" align="center" prop="hospitalNo" fixed="left" width="120"/>
      <el-table-column label="状态" align="center" prop="status" width="110" fixed="left">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.HOSP_MEDICAL_COPY_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="申请单号" align="center" prop="applyNo" width="190"/>
      <el-table-column label="订单金额" align="center" prop="totalPrice"  width="80"/>
<!--      <el-table-column label="主页ID" align="center" prop="homepageId" />-->
      <el-table-column label="出院日期" align="center" prop="leaveHospitalDate" width="100"/>
      <el-table-column label="出院科室" align="center" prop="leaveHospitalDept" />
      <el-table-column label="复印份数" align="center" prop="number"  min-width="80"/>
      <el-table-column label="复印用途" align="center" prop="purpose"  min-width="120"/>
      <el-table-column label="复印内容" align="center" prop="content"  min-width="120"/>
      <el-table-column label="病案类型" align="center" prop="medicalType" min-width="100"/>
<!--      <el-table-column label="患者ID" align="center" prop="patientId"  width="90"/>-->
      <el-table-column label="患者类型" align="center" prop="patientType"  width="90"/>
      <el-table-column label="患者证件号" align="center" prop="patientCardNo"  width="150"/>
<!--      <el-table-column label="患者身份证人像面" align="center" prop="patientCardImgFront" />-->
<!--      <el-table-column label="患者身份证国徽面" align="center" prop="patientCardImgReverse" />-->
      <el-table-column label="与患者关系" align="center" prop="relation"  width="90"/>
      <el-table-column label="申请人姓名" align="center" prop="applicantName"  width="100"/>
      <el-table-column label="申请人证件号" align="center" prop="applicantCardNo"  width="150"/>
<!--      <el-table-column label="申请人身份证人像面" align="center" prop="applicantCardImgFront" />-->
<!--      <el-table-column label="申请人身份证国徽面" align="center" prop="applicantCardImgReverse" />-->
<!--      <el-table-column label="其他文件" align="center" prop="otherFile" />-->
      <el-table-column label="收取方式" align="center" prop="collectType"  width="80"/>
      <el-table-column label="收件人姓名" align="center" prop="recipientName"  width="100"/>
      <el-table-column label="收件人电话" align="center" prop="recipientPhone"  width="110"/>
      <el-table-column label="收件人地址" align="center" prop="recipientAddress"  width="150"/>
<!--      <el-table-column label="快递公司ID" align="center" prop="deliveryId" />-->
      <el-table-column label="快递公司" align="center" prop="deliveryName"  width="120"/>
      <el-table-column label="快递单号" align="center" prop="deliveryNo"  width="120"/>
      <el-table-column label="支付订单号" align="center" prop="orderNumber"  width="200"/>
      <el-table-column label="渠道订单号" align="center" prop="thirdOrderNo"  width="190"/>
      <el-table-column label="病案费用" align="center" prop="medicalPrice"  width="80"/>
      <el-table-column label="打印费用" align="center" prop="printPrice"  width="80"/>
      <el-table-column label="邮寄费用" align="center" prop="postagePrice"  width="80"/>
      <el-table-column label="服务费用" align="center" prop="servicePrice"  width="80"/>
      <el-table-column label="其他费用" align="center" prop="otherPrice"  width="80"/>
<!--      <el-table-column label="支付状态" align="center" prop="payStatus"  width="120"/>-->
      <el-table-column
        label="支付时间"
        align="center"
        prop="payTime"
        :formatter="dateFormatter"
        width="150"
      />
      <el-table-column label="支付方式" align="center" prop="payType"  width="100"/>
      <el-table-column label="退款订单号" align="center" prop="refundNumber"  width="200"/>
      <el-table-column label="退款金额" align="center" prop="refundPrice" width="80"/>
      <el-table-column
        label="退款时间"
        align="center"
        prop="refundTime"
        :formatter="dateFormatter"
        width="150"
      />
<!--      <el-table-column label="退款原因" align="center" prop="refundReason" />-->
<!--      <el-table-column label="审核意见" align="center" prop="examine" />-->
<!--      <el-table-column label="备注" align="center" prop="remark" />-->
      <el-table-column
        label="申请时间"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
        width="150"
      />
      <el-table-column label="操作" align="center" min-width="80" fixed="right">
        <template #default="scope">
          <div class="">
<!--          <el-button-->
<!--            plain-->
<!--            size="small"-->
<!--            type="primary"-->
<!--            @click="openForm('update', scope.row.id)"-->
<!--            v-hasPermi="['hospital:medical-copy:update']"-->
<!--          >-->
<!--            编辑-->
<!--          </el-button>-->
            <div>
              <el-button
                plain
                size="small"
                type="warning"
                @click="openDetailForm(scope.row.id)"
                v-hasPermi="['hospital:medical-copy:examine']"
              >
                详情
              </el-button>
            </div>
        <div class="mt-1" v-if="scope.row.status === 4">
          <el-button
            plain
            size="small"
            type="primary"
            v-if="scope.row.collectType === '邮寄'"
            @click="openEndForm(scope.row.id)"
            v-hasPermi="['hospital:medical-copy:end']"
          >
            发货
          </el-button>
        </div>
            <div class="mt-1" v-if="scope.row.status === 4">
          <el-button
            plain
            size="small"
            type="primary"
            v-if="scope.row.collectType === '自提'"
            @click="handleTake(scope.row)"
            v-hasPermi="['hospital:medical-copy:end']"
          >
            取件
          </el-button>
            </div>
            <div class="mt-1">
          <el-button
            plain
            size="small"
            type="danger"
            v-if="scope.row.status === 0"
            @click="openExamineForm(scope.row.id)"
            v-hasPermi="['hospital:medical-copy:examine']"
          >
            审核
          </el-button>
            </div>

            <div class="mt-1">
              <el-button
                plain
                size="small"
                type="danger"
                @click="openRefundForm(scope.row.id)"
                v-if="scope.row.payStatus === 2"
                v-hasPermi="['hospital:medical-copy:refund']"
              >
                退款
              </el-button>
            </div>
            <div class="mt-1" v-if="scope.row.status > 2">
              <el-button
                plain
                size="small"
                type="success"
                @click="handleQueryStatus(scope.row.id)"
                v-hasPermi="['hospital:medical-copy:query']"
              >
                同步
              </el-button>
            </div>

            <div class="mt-1" v-if="scope.row.status > 5">
              <el-button
                plain
                size="small"
                type="primary"
                @click="handleEnd(scope.row)"
                v-hasPermi="['hospital:medical-copy:end']"
              >
                完成
              </el-button>
            </div>



<!--          <el-button-->
<!--            plain-->
<!--            size="small"-->
<!--            type="danger"-->
<!--            @click="handleDelete(scope.row.id)"-->
<!--            v-hasPermi="['hospital:medical-copy:delete']"-->
<!--          >-->
<!--            删除-->
<!--          </el-button>-->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：详情 -->
  <detail ref="detailRef"/>
  <!-- 表单弹窗：添加/修改 -->
  <MedicalCopyForm ref="formRef" @success="getList" />
  <!-- 表单弹窗：审核 -->
  <MedicalCopyExamineForm ref="examineFormRef" @success="getList" />
  <!-- 表单弹窗：退款 -->
  <MedicalCopyRefundForm ref="refundFormRef" @success="getList" />
  <!-- 表单弹窗：完成 -->
  <MedicalCopyEndForm ref="endFormRef" @success="getList" />
</template>

<script setup lang="ts">
import { DICT_TYPE, getStrDictOptions, getDictOptions, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { MedicalCopyApi, MedicalCopyVO } from '@/api/hospital/medicalcopy'
import MedicalCopyForm from './MedicalCopyForm.vue'
import MedicalCopyExamineForm from './MedicalCopyExamineForm.vue'
import MedicalCopyEndForm from './MedicalCopyEndForm.vue'
import MedicalCopyRefundForm from './MedicalCopyRefundForm.vue'

/** 病案复印 列表 */
defineOptions({ name: 'MedicalCopy' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<MedicalCopyVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  orgId: undefined,
  orgName: undefined,
  orgCode: undefined,
  applyNo: undefined,
  homepageId: undefined,
  leaveHospitalDate: [],
  leaveHospitalDept: undefined,
  leaveHospitalCertificate: undefined,
  hospitalNo: undefined,
  medicalType: undefined,
  purpose: undefined,
  content: undefined,
  relation: undefined,
  patientId: undefined,
  patientType: undefined,
  patientName: undefined,
  patientCardNo: undefined,
  patientCardImgFront: undefined,
  patientCardImgReverse: undefined,
  applicantName: undefined,
  applicantCardNo: undefined,
  applicantCardImgFront: undefined,
  applicantCardImgReverse: undefined,
  otherFile: undefined,
  collectType: undefined,
  recipientName: undefined,
  recipientPhone: undefined,
  recipientAddress: undefined,
  deliveryId: undefined,
  deliveryName: undefined,
  deliveryNo: undefined,
  orderNumber: undefined,
  thirdOrderNo: undefined,
  totalPrice: undefined,
  medicalPrice: undefined,
  printPrice: undefined,
  postagePrice: undefined,
  servicePrice: undefined,
  otherPrice: undefined,
  payStatus: undefined,
  payTime: [],
  payType: undefined,
  refundNumber: undefined,
  refundPrice: undefined,
  refundTime: [],
  refundReason: undefined,
  examine: undefined,
  remark: undefined,
  status: undefined,
  createTime: [],
  patientCardImgHandheld: undefined,
  applicantCardImgHandheld: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await MedicalCopyApi.getMedicalCopyPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}


/** 详情操作 */
const detailRef = ref()
const openDetailForm = (id?: number) => {
  detailRef.value.open(id)
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 审核操作 */
const examineFormRef = ref()
const openExamineForm = (id?: number) => {
  examineFormRef.value.open(id)
}

/** 退款操作 */
const refundFormRef = ref()
const openRefundForm = (id?: number) => {
  refundFormRef.value.open(id)
}


/** 完成操作 */
const endFormRef = ref()
const openEndForm = (id?: number) => {
  endFormRef.value.open(id)
}


/** 查询支付状态按钮操作 */
const handleQueryStatus = async (id: number) => {
  loading.value = true
  try {
    const data = await MedicalCopyApi.queryPayStatus(id)
    // 刷新列表
    await getList()
  } finally {
    loading.value = false
  }
}

/** 取件按钮操作 */
const handleTake = async (obj: any) => {
  try {
    // 删除的二次确认
    await message.confirm("确认通知申请人取件吗？")
    // 取件
    await MedicalCopyApi.sendMedicalCopy(obj)
    message.success('操作成功')
    // 刷新列表
    await getList()
  } catch {}
}

/** 完成按钮操作 */
const handleEnd = async (obj: any) => {
  try {
    // 删除的二次确认
    await message.confirm("确认完成该病案复印申请吗？")
    // 取件
    await MedicalCopyApi.endMedicalCopy(obj)
    message.success('操作成功')
    // 刷新列表
    await getList()
  } catch {}
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await MedicalCopyApi.exportMedicalCopy(queryParams)
    download.excel(data, '病案复印.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>


<style scoped>
:deep(.el-table) {
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  max-width: 100%;
  font-size: 12px;
  color: #000000;
}
:deep(.refund-row) {
  background-color: #F3D39BFF !important;
}

:deep(.fails-row) {
  background-color: #D15B47 !important;
}

:deep(.success-row) {
  background-color: #36bc99 !important;
}
:deep(.my-table td) {
  padding: 5px 0 !important;
}

</style>
